import React, { Component } from 'react';
import { details_list } from '../apis/api'
import Header from '../components/MyHeader/header'
import { Swiper, Tag, List } from 'antd-mobile'
import '../styles/details.scss'
class details extends Component {
    state = {
        data: [],
        list: [],
        price: {},
        name: "",
        description: "",
        arr: [],
        isGoodInfo: true
    }
    toShop = () => {
        this.props.history.push('/home/shop')
    }
    componentDidMount() {
        let { goodid } = this.props.location.state;

        details_list({ goodid }).then((res) => {
            console.log(res);
            if (res.data.goodinfo) {
                this.setState({
                    data: res.data.goodinfo.pics || [res.data.goodinfo.pic],
                    list: res.data.goodinfo.activityTags,
                    price: res.data.goodinfo.salesPrice,
                    description: res.data.goodinfo.description,
                    name: res.data.goodinfo.name,
                    arr: res.data.goodinfo.activityTags,
                    isGoodInfo: true

                })
            } else {
                this.setState({ isGoodInfo: false })
            }
        })
    }

    render() {
        function handleClick() {
            // ...
        }
        return (
            <div className='details'>
                <Header left='homeIconLeft' title='商品详情' />
                {
                    this.state.isGoodInfo ?
                        (
                            <div>
                                <div className="box">
                                    < Swiper autoplay loop>
                                        {
                                            this.state.data.map((item, index) => {
                                                return (
                                                    <Swiper.Item key={index}>
                                                        <img src={item} alt="" />
                                                    </Swiper.Item>
                                                )
                                            })
                                        }
                                    </Swiper>
                                    <div className='price'>
                                        <h2>
                                            <span>￥</span><span className='rmb'>{this.state.price.value}</span>
                                        </h2>
                                        <Tag color='#ff6430' fill='outline'>
                                            {this.state.arr[0]}
                                        </Tag>
                                    </div>
                                    <Tag className='tagb' color='#ff6430' fill='outline'>
                                        {this.state.price.name}
                                    </Tag>
                                    <h3>{this.state.name}</h3>
                                    <p>{this.state.description}</p>
                                </div>
                                <div className='list'>
                                    <List mode='card' >
                                        <List.Item onClick={handleClick}>参与积分抵扣、参与积分赠送</List.Item>
                                        <List.Item onClick={handleClick}>不支持7天无理由退货</List.Item>
                                        <List.Item onClick={handleClick}>报税进口，综合区</List.Item>
                                    </List>
                                </div>
                            </div>
                        )
                        :
                        (
                            <div className="box">
                                <img className='url' src="https://img1.baidu.com/it/u=2846379866,1969463384&fm=253&fmt=auto&app=138&f=JPEG?w=648&h=432" alt="" />
                                <h4>亲！你关注的商品已下架~</h4>
                                <div className='click' onClick={this.toShop}>点我~去瞧瞧别的~</div>
                            </div>
                        )
                }

            </div>
        );
    }
}

export default details;